import React from "react";
import { EmptyPage, MyNavBar, UserVideoBuyItem } from "../../../components";
import style from "./style.module.scss";
import { useRequest } from "ahooks";
import { getUserVideoBuyList } from "../../../api/my";
import { useAppSelector } from "../../../store/hooks";
import { useNavigate, useSearchParams } from "react-router-dom";

//  我的——用户购买视频数据类型
interface UserVideoBuyItem {
  id: number;
  videoId: number;
  title: string;
  originalUrl: string;
  duration: number;
  createTime: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const type = searchParams.get("type") as string;
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  //  查询用户购买视频列表  接口
  const { data: userVideoBuyList = [], run } = useRequest(async () => {
    const resp = await getUserVideoBuyList(1, 3, userId, sessionId);
    return resp.result;
  });
  return (
    <div>
      {userVideoBuyList.length === 0 ? (
        <EmptyPage
          path={-1}
          title="购买的视频"
          desc="您还没有购买过视频！"
        ></EmptyPage>
      ) : (
        <div className={style.payVideo}>
          <div className="navbar">
            <MyNavBar
              title="购买的视频"
              leftArrow
              onClickLeft={() => navigate("/my")}
              style={{ backgroundColor: "#fff" }}
            ></MyNavBar>
          </div>
          <div className={style.userVideoBuyList}>
            {userVideoBuyList &&
              userVideoBuyList.map((item: UserVideoBuyItem) => {
                return (
                  <UserVideoBuyItem
                    type={type}
                    buyItem={item}
                    key={item.id}
                    onUpdate={() => run()}
                  ></UserVideoBuyItem>
                );
              })}
          </div>
        </div>
      )}
    </div>
  );
};

export default Index;
